<style type="text/css">

    #konten {
        height: 30em;
        overflow: auto;
        border: 1px dashed black;
    }

    #judul {
        width: 368px;
        border: 1px dashed black;
    }

    .container {
        margin-bottom: 1.4em;
    }

    #simpanbutton {
        float: right;
        top: -3px;
    }

    .picbox {
        border: 1px solid black;
        height: 100px;
        width: 100px;
        margin-right: 1.7em;
        display: inline-block;
        clear: both;
    }

    .picbox:hover {
        border-color: red;
        cursor: pointer;
    }

</style>
<div>
    Kegiatan :
    <input id="carikegiatan" type="text" />
    (silahkan masukkan judul kegiatan dan pilih dari dropdown yang muncul)
</div>
<div id="kegiatan-summary" style="display: none; min-height: 150px;">
    <input type="hidden" id="kegiatan-id" />
    <h1 class="judulkegiatan title content-title">Judul Kegiatan</h1>
    <p class="content-textbox">
        <br />
        <img class="pickegiatan" src="#" style="float: left; margin: 1em; height: 100px; width: 100px;"/>
        <span class="sumkegiatan">
        </span>
    </p>
</div>
<div>
    <div class="container">
        <h1 id="judul" class="title content-title">
            {masukkan judul berita kegiatan}
        </h1>
    </div>

    <div class="container">
        <div id="konten" class="content-textbox">
            {masukkan narasi berita kegiatan}
        </div>
    </div>

    <div class="container" style="margin-bottom: 2em;">
        <?php for ($i = 0; $i < 5; $i++) { ?>
            <div style="display: inline-block;">
                <div id="pic<?php echo $i; ?>" class="img-uploader picbox makethumb"></div>
                <form class="img-uploader" action="<?php echo site_url("service/imageupload/kegpic/1/100/100"); ?>" method="post" enctype="multipart/form-data"></form>
            </div>
        <?php }; ?>
    </div>

    <div class="container" style="margin-bottom: 5.2em; margin-right: 2em;">
        <button id="simpanbutton" onClick="javascript:saveForm();">Simpan</button>
    </div>

</div>
<script type="text/javascript">
            var defJudul, defKonten;
            $(document).ready(function() {
                $("#carikegiatan").autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "<?php echo site_url("service/autocompletesearch/kegbyjudul"); ?>",
                            method: "POST",
                            dataType: "json",
                            data: {
                                keywords: request.term
                            },
                            success: function(data) {
                                response(data);
                            }
                        });
                    },
                    minLength: 2,
                    focus: function(event, ui) {
                        $("#carikegiatan").val(ui.item.label);
                        return false;
                    },
                    select: function(event, ui) {
                        $("#carikegiatan").val(ui.item.label);
                        $("#carikegiatan").blur();
                        return false;
                    }
                });
                createTitleEditor("h1#judul", function() {
                    defJudul = $("#judul").text();
                });
                createContentEditor("div#konten", function() {
                    defKonten = $("#konten").html();
                });
                $("h1#judul").focus(function() {
                    if ($("h1#judul").text() === defJudul) {
                        $("h1#judul").text("");
                    }
                });
                $("h1#judul").blur(function() {
                    if ($("h1#judul").text() === "") {
                        $("h1#judul").text(defJudul);
                    }
                });
                $("div#konten").focus(function() {
                    if ($("div#konten").html() === defKonten) {
                        $("div#konten").html("");
                    }
                });
                $("div#konten").blur(function() {
                    if ($("div#konten").html() === "") {
                        $("div#konten").html(defKonten);
                    }
                });
                $("#carikegiatan").blur(function() {
                    updateKegiatan();
                });
            });
            function updateKegiatan() {
                $("#kegiatan-summary").css("display", "none");
                $("#kegiatan-id").val("");
                $.ajax({
                    url: "<?php echo site_url("service/autocompletesearch/kegbyjudul"); ?>",
                    method: "POST",
                    dataType: "json",
                    data: {
                        keywords: $("#carikegiatan").val()
                    },
                    success: function(data) {
                        if (data.length > 0) {
                            $("#carikegiatan").val(data[0].label);
                            $.ajax({
                                url: "<?php echo site_url("service/getDataJSON/kegbyid"); ?>",
                                method: "POST",
                                dataType: "json",
                                data: {
                                    id: data[0].value
                                },
                                success: function(kegiatan) {
                                    $("#kegiatan-summary .judulkegiatan").text(kegiatan.content_id.title);
                                    $("#kegiatan-summary .pickegiatan").prop("src", kegiatan.content_id.thumbnail_img.src);
                                    $("#kegiatan-summary .sumkegiatan").html(kegiatan.content_id.text);
                                    $("#kegiatan-id").val(kegiatan.id);
                                    $("#kegiatan-summary").css("display", "block");
                                }
                            });
                        }
                    }
                });

            }

            function saveForm() {

                // inquiry    
                var data = {
                    kegiatan_id: parseInt($("#kegiatan-id").val()),
                    judul: $("#judul").text(),
                    konten: $("#konten").html(),
<?php
for ($i = 0; $i < 5; $i++) {
    echo "pic" . $i . ": $(\"#pic" . $i . " input[type='hidden']\").val(),";
}
?>
                };
                // validation
                var messages = [];
                var validated = true;
                var goFocus = true;
                //..
                if (!(data.kegiatan_id > 0)) {
                    messages.push("Pilih Kegiatan");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#judul";
                    }
                }
                if (data.judul === defJudul) {
                    messages.push("Isi Judul Berita Kegiatan");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#judul";
                    }
                }
                if (data.konten === defKonten) {
                    messages.push("Isi Konten Berita Kegiatan");
                    validated = false;
                    if (!goFocus) {
                        goFocus = "#konten";
                    }
                }

                if (validated) {
                    // send
                    $.ajax({
                        type: "POST",
                        url: "<?php echo site_url("kegiatan/saveBeritaKegiatan"); ?>",
                        data: data,
                        beforeSend: function(xhr) {
                            $("#simpanbutton").prop("disabled", true);
                        },
                        success: function(result, status, xhr) {
                            $("#simpanbutton").prop("disabled", false);
                            window.location = "<?php echo site_url("usercp/historykegiatan"); ?>";
                        },
                        error: function(xhr, status, error) {
                            $("#simpanbutton").prop("disabled", false);
                        }
                    });
                } else {
                    var message = "Gagal menyimpan, silahkan : ";
                    message += "<ul>";
                    for (var i = 0; i < messages.length; i++) {
                        message += "<li>" + messages[i] + "</li>";
                    }
                    message += "</ul>";
                    alert(message, "Perhatian");
                    $(goFocus).focus();
                    return false;
                }
            }
</script>